<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>多维数据分析卫士</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="icon" type="image/x-icon" href="${ctx}/imgs/login/favicon.ico" >

  <link rel="stylesheet" href="${ctx}/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="${ctx}/bower_components/iconfont/iconfont.css">
  <link rel="stylesheet" href="${ctx}/bower_components/iconfont/iconfontstar.css">
  <link rel="stylesheet" href="${ctx}/bower_components/iconfont/map/iconfont.css">
  <link rel="stylesheet" href="${ctx}/bower_components/bootstrap-table/bootstrap-table.css">
  <link rel="stylesheet" href="${ctx}/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="${ctx}/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="${ctx}/bower_components/select2/dist/css/select2.min.css">
  <link rel="stylesheet" href="${ctx}/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="${ctx}/dist/css/skins/skin-blue.css">
  <link rel="stylesheet" href="${ctx}/cus/base.css">
  <link rel="stylesheet" href="${ctx}/plugins/iCheck/all.css">
  <link rel="stylesheet" href="${ctx}/plugins/iCheck/square/blue.css">
  <link rel="stylesheet" href="${ctx}/bower_components/bootstrap-fileinput/css/fileinput.css" media="all">
  <link rel="stylesheet" href="${ctx}/cus/operations.css">
  <link rel="stylesheet" href="${ctx}/bower_components/toastr-master/css/toastr.css">
  <!-- bootstrap datepicker -->
  <link rel="stylesheet" href="${ctx}/bower_components/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
  
  <link rel="stylesheet" href="${ctx}/plugins/robot/fonts/iconfont.css">
  <link rel="stylesheet" href="${ctx}/plugins/robot/css/style.css">


    
  <script>
    var basepath="${ctx}"
    var ENV;
  </script>
  <link rel="stylesheet" href="${ctx}/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.css">
  <!--vue  相关js-->
  <script src="${ctx}/bower_components/vue/js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="${ctx}/bower_components/vue/css/element-ui.css">
  <!-- 引入组件库 -->
  <script src="${ctx}/bower_components/vue/js/element-ui.js"></script>
  <!-- 引入组件库 -->
  <script src="${ctx}/bower_components/vue/js/axios.js"></script>
  <script src="${ctx}/bower_components/vue/js/request.js"></script>
  <script src="${ctx}/bower_components/vue/common/dateUtils.js"></script>
  <script src="${ctx}/bower_components/vue/common/echartsUtils.js"></script>
  <script src="${ctx}/bower_components/vue/common/mapUtils.js"></script>
  <link rel="stylesheet" href="${ctx}/bower_components/ztree/css/metroStyle/metroStyle.css">

  <!-- 引入样式 -->
  <link rel="stylesheet" href="${ctx}/bower_components/vue/css/element-font.css">
  <link rel="stylesheet" href="${ctx}/bower_components/vue/css/common.css">
  <!-- 引入组件库 -->
  <script src="${ctx}/bower_components/vue/js/element-font.js"></script>


  <script src="${ctx}/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="${ctx}/bower_components/jquery.form/jquery.form.js"></script>
  <script src="${ctx}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <!--<script src="${ctx}/dist/js/adminlte.min.js"></script>-->
  <script src="${ctx}/plugins/iCheck/icheck.min.js"></script>
  <script src="${ctx}/bower_components/jquery-validation-1.17.0/dist/jquery.validate.min.js"></script>
  <script src="${ctx}/bower_components/jquery-validation-1.17.0/dist/additional-methods.min.js"></script>
  <script src="${ctx}/bower_components/gasparesganga-jquery-loading-overlay/src/loadingoverlay.min.js"></script>
  <script src="${ctx}/bower_components/bootbox.js/bootbox.js"></script>
  <script src="${ctx}/bower_components/echarts/dist/echarts.min.js" type="text/javascript" ></script>
  <script src="${ctx}/bower_components/select2/dist/js/select2.full.min.js"></script>
  
  <script src="${ctx}/bower_components/bootstrap-table/bootstrap-table.js" type="text/javascript"></script>
  <script src="${ctx}/cus/colResizable-1.6.js" type="text/javascript"></script>
  <script src="${ctx}/cus/bootstrap-table-resizable.js" type="text/javascript"></script>
  <script src="${ctx}/bower_components/assets/js/bootstrap-table-zh-CN.min.js"></script>
  <script src="${ctx}/bower_components/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
  <script src="${ctx}/bower_components/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
  <!-- bootstrap datepicker start-->
  <script src="${ctx}/bower_components/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
  <script src="${ctx}/bower_components/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>
  <script src="${ctx}/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
  <script src="${ctx}/bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
  <!-- bootstrap datepicker end-->
  <script src="${ctx}/bower_components/bootstrap-tree-view/js/bootstrap-treeview.js"></script>
  <script src="${ctx}/bower_components/toastr-master/js/toastr.js"></script>
  <script src="${ctx}/plugins/d3/js_re/d3.v3.min.js"></script>
  <script src="${ctx}/plugins/d3/js_re/Myforce.min.js"></script>
  <script src="${ctx}/plugins/d3/js_re/Mycontext.js" ></script>
  <script src="${ctx}/plugins/d3/js_re/Mycontextclick.min.js"></script>
  <script src="${ctx}/plugins/d3/js_re/MyToolsBox.js"></script>
  <script src="${ctx}/plugins/d3/js_re/context.js"></script>
  <script src="${ctx}/plugins/robot/js/final-chatting.js"></script>
  <script src="${ctx}/bower_components/ztree/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript" src="${ctx}/bower_components/ztree/js/jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="${ctx}/bower_components/ztree/js/jquery.ztree.exedit.js"></script>
  <script type="text/javascript" src="${ctx}/bower_components/ztree/js/jquery.ztree.exhide.js"></script>
  <script type="text/javascript" src="${ctx}/bower_components/ztree/js/fuzzysearch.js"></script>

  <!--引入pdf类库-->
  <script src="${ctx}/bower_components/pdf/html2canvas.js"></script>
  <script src="${ctx}/bower_components/pdf/jsPdf.debug.js"></script>
  <script src="${ctx}/bower_components/pdf/pdfUtils.js"></script>
  <!--引入dialog弹窗类库-->
  <script src="${ctx}/bower_components/dialog/dist/dialog-plus.js"></script>

  <!--引入easyui库-->
  <link rel="stylesheet" type="text/css" href="${ctx}/bower_components/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/bower_components/easyui/themes/icon.css">
  <script src="${ctx}/bower_components/easyui/jquery.easyui.min.js"></script>
  <script src="${ctx}/bower_components/easyui/locale/easyui-lang-zh_CN.js"></script>

  <script type="text/javascript" src="${ctx}/ggcss/lastesui.js"></script>
  <link rel="stylesheet" href="${ctx}/ggcss/lastesui.css">

</head>
<body class="hold-transition skin-blue">

<div class="wrapper">
  <#if Session["loginUser"]?exists>
    <input id="vid" hidden value='${Session["loginUser"].id}' />
  </#if>
  
 <script type="text/javascript">
 	function mrdMap(){
 		this.map;
 		this.init=function(id){
				let m = {}
				if (ENV && ENV == 'Extranet') { //外网
					m = {
						minZoom : 5,
						maxZoom : 19
					}
				} else { //内网
					m = {
						minZoom : 5,
						maxZoom : 11
					}
				}
				this.map = new BMap.Map(id, m); // 创建Map实例
				this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 7); // 初始化地图,设置中心点坐标和地图级别
				//添加地图类型控件
				this.map.addControl(new BMap.MapTypeControl({
					mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
				}));
				this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

				this.map.clearOverlays();//清除图层覆盖物
			};
			this.loadData = function(mapData) {
				var that=this;
				this.map.centerAndZoom(new BMap.Point(116.4035, 39.915), 5); // 初始化地图,设置中心点坐标和地图级别
				//添加地图类型控件
				this.map.addControl(new BMap.MapTypeControl({
					mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
				}));
				this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

				this.map.clearOverlays();//清除图层覆盖物
				var polyLineArr = [];
				for (let i = 0; i < mapData.data.length; i++) {
					let val = mapData.data[i]
					let point = new BMap.Point(val.lngb, val.latb);
					let marker = new BMap.Marker(point); // 创建标注
					this.map.addOverlay(marker); // 将标注添加到地图中

					let label = new BMap.Label(i + 1, {
						offset : new BMap.Size(3, 3)
					});
					label.setStyle({
						background : 'none',
						color : '#fff',
						border : 'none'
					});
					marker.setLabel(label);
					polyLineArr.push(point);
					addClickHandler(marker,val.lac,val.cid,val.address);
				}
				var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW,
						{
							scale : 0.6,//图标缩放大小
							strokeColor : '#fff',//设置矢量图标的线填充颜色
							strokeWeight : '2',//设置线宽
						});
				var icons = new BMap.IconSequence(sy, '10', '30');
				var polyline = new BMap.Polyline(polyLineArr, {

					enableEditing : false,//是否启用线编辑，默认为false
					enableClicking : true,//是否响应点击事件，默认为true
					icons : [ ],
					strokeWeight : '4',//折线的宽度，以像素为单位
					strokeOpacity : 0.8,//折线的透明度，取值范围0 - 1
					strokeColor : "red" //折线颜色
				}); //创建折线
				//var curve = new BMapLib.CurveLine(polyLineArr, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
				this.map.addOverlay(polyline);
				function addClickHandler(marker,lac,cid,address) {
					marker.addEventListener("click", function(e) {
						openInfo(e,lac,cid,address)
					});
				}
				function openInfo(e,lac,cid,address) {
					var p = e.target;
					var point = new BMap.Point(p.LA.lng, p.LA.lat);
					var opts = {
						width : 500, // 信息窗口宽度
						height : 350, // 信息窗口高度
						enableMessage : true
					//设置允许信息窗发送短息
					};
					var content;
					if(mapData.data2 && mapData.data2.length>0){
						var arr=new Array();
						for (let i = 0; i < mapData.data2.length; i++) {
							let val = mapData.data2[i];
							if(val.lac==lac && val.cid==cid){
								arr.push(val);
							}
						}
						
						content='<div class="alarmDiv" style="display:flex;flex-direction:column;height:350px;">';
							content+='<p>经度：'+p.LA.lat+'</p>';
							content+='<p>纬度：'+p.LA.lng+'</p>';
							content+='<p>地址：'+address+'</p>';
							content+='<p>出现次数：'+arr.length+'</p>';
							content+='<div class="alarmDiv-table" style="flex:1;overflow:auto;">';
							content+='<table border="1">';
							content+=' <tr>';
							content+=' 	<td>服务号码</td>';
							content+=' 	<td>时间</td>';
							content+=' 	<td>呼叫方式</td>';
							content+=' 	<td>对方号码</td>';
							content+=' 	<td>通话时长</td>';
							content+=' </tr>';
							for(let i = 0; i < arr.length; i++){
								let val = arr[i];
								content+=' <tr>';
								content+=' 	<td>'+val.service_NUMBER+'</td>';
								content+=' 	<td>'+val.starting_TIME+'</td>';
								let callType = val.call_TYPE;
								if(callType==1){
									content+=' 	<td>主叫</td>';
								}else if(callType==2){
									content+=' 	<td>被叫</td>';
								}else if(callType==3){
									content+=' 	<td>短信发送</td>';
								}else if(callType==4){
									content+=' 	<td>短信接收</td>';
								}else{
									content+=' 	<td></td>';
								}
								content+=' 	<td>'+val.party_NUMBER+'</td>';
								content+=' 	<td>'+val.talk_TIME+'秒</td>';
								content+=' </tr>';
							}
							content+='</table>';
							content+='</div>';
							content+='</div>';
					}else{
						content=address;
						opts = {
							width : 250, // 信息窗口宽度
							height : 80, // 信息窗口高度
							enableMessage : true
						//设置允许信息窗发送短息
						};
					}
					var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
					that.map.openInfoWindow(infoWindow, point); //开启信息窗口
				}
			}
		}
	</script>